  //
  //  FillStroke.swift
  //  SwiftUIShape
  //
  //  Created by 李煜 on 2024/7/31.
  //

import SwiftUI

struct FillStroke: View {
  var body: some View {
      //矩形底座的圆顶
    Path {path in
      path.move(to: CGPoint(x: 20, y: 60))
      path.addLine(to: CGPoint(x: 40, y: 60))
      path.addQuadCurve(to: CGPoint(x: 210, y: 60), control: CGPoint(x: 125, y: 0))
      path.addLine(to: CGPoint(x: 230, y: 60))
      path.addLine(to: CGPoint(x: 230, y: 100))
      path.addLine(to: CGPoint(x: 20, y: 100))
      path.closeSubpath()
    }
    .fill(.purple)
    
      //绘制带边框的图形: 使用ZStack将边框(线条)覆盖到图形(填充图)
    ZStack {
      Path() { path in
        path.move(to: CGPoint(x: 20, y: 60))
        path.addLine(to: CGPoint(x: 40, y: 60))
        path.addQuadCurve(to: CGPoint(x: 210, y: 60), control: CGPoint(x: 125, y: 0))
        path.addLine(to: CGPoint(x: 230, y: 60))
        path.addLine(to: CGPoint(x: 230, y: 100))
        path.addLine(to: CGPoint(x: 20, y: 100))
      }
      .fill(Color.purple)
      
      Path() { path in
        path.move(to: CGPoint(x: 20, y: 60))
        path.addLine(to: CGPoint(x: 40, y: 60))
        path.addQuadCurve(to: CGPoint(x: 210, y: 60), control: CGPoint(x: 125, y: 0))
        path.addLine(to: CGPoint(x: 230, y: 60))
        path.addLine(to: CGPoint(x: 230, y: 100))
        path.addLine(to: CGPoint(x: 20, y: 100))
        path.closeSubpath()
      }
      .stroke(Color.black, lineWidth: 5)
    }
    .background(.gray)
  }
}

#Preview {
  FillStroke()
}
